<html lang="en" style="--vh:8.83px;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聊天室测试</title>
    <!-- Bundle Styles -->
    <link rel="stylesheet" href="/admin/chat/bundle.css">
    <link rel="stylesheet" href="/admin/chat/enjoyhint.css">
    <!-- App styles -->
    <link rel="stylesheet" href="/admin/chat/app.min.css">
</head>
<body class="">

<!-- 语音通话 -->
<div class="modal call fade" id="call" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-zoom" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="call">
                    <div>
                        <figure class="mb-4 avatar avatar-xl">
                            <img src="/admin/chat/women_avatar1.jpg" class="rounded-circle" alt="image">
                        </figure>
                        <h4>Brietta Blogg <span class="text-success">正在连接语音中...</span></h4>
                        <div class="action-button">
                            <button type="button" class="btn btn-danger btn-floating btn-lg" data-dismiss="modal">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-x">
                                    <line x1="18" y1="6" x2="6" y2="18"></line>
                                    <line x1="6" y1="6" x2="18" y2="18"></line>
                                </svg>
                            </button>
                            <button type="button" class="btn btn-success btn-pulse btn-floating btn-lg">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-phone">
                                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 语音通话 -->

<!-- 视频通话 -->
<div class="modal call fade" id="videoCall" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-zoom" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="call">
                    <div>
                        <figure class="mb-4 avatar avatar-xl">
                            <img src="/admin/chat/women_avatar1.jpg" class="rounded-circle" alt="image">
                        </figure>
                        <h4>Brietta Blogg <span class="text-success">正在连接视频中...</span></h4>
                        <div class="action-button">
                            <button type="button" class="btn btn-danger btn-floating btn-lg" data-dismiss="modal">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-x">
                                    <line x1="18" y1="6" x2="6" y2="18"></line>
                                    <line x1="6" y1="6" x2="18" y2="18"></line>
                                </svg>
                            </button>
                            <button type="button" class="btn btn-success btn-pulse btn-floating btn-lg">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-video">
                                    <polygon points="23 7 16 12 23 17 23 7"></polygon>
                                    <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 视频通话 -->

<!-- 添加联系人 -->
<div class="modal fade" id="addFriends" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-zoom" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                         class="feather feather-user-plus mr-2">
                        <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                        <circle cx="8.5" cy="7" r="4"></circle>
                        <line x1="20" y1="8" x2="20" y2="14"></line>
                        <line x1="23" y1="11" x2="17" y2="11"></line>
                    </svg>
                    添加联系人
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="ti-close"></i>
                </button>
            </div>
            <div class="modal-body">
                {/*                <div class="alert alert-info">Send invitations to friends.</div>*/}
                <form>
                    <div class="form-group">
                        <label for="emails" class="col-form-label">账号或昵称</label>
                        <input type="text" class="form-control" id="emails">
                    </div>
                    <div class="form-group">
                        <label for="message" class="col-form-label">备注信息</label>
                        <textarea class="form-control" id="message"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>
<!-- 添加联系人 -->

<!-- 创建分组 -->
<div class="modal fade" id="newGroup" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-zoom" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                         class="feather feather-users mr-2">
                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                        <circle cx="9" cy="7" r="4"></circle>
                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                    </svg>
                    添加分组
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="ti-close"></i>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="group_name" class="col-form-label">分组名称</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="group_name">
                            <div class="input-group-append">
                                <button class="btn btn-light" data-toggle="tooltip" type="button"
                                        data-original-title="Emoji">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                         stroke-linejoin="round" class="feather feather-smile">
                                        <circle cx="12" cy="12" r="10"></circle>
                                        <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
                                        <line x1="9" y1="9" x2="9.01" y2="9"></line>
                                        <line x1="15" y1="9" x2="15.01" y2="9"></line>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                    <p class="mb-2">选择联系人</p>
                    <div class="form-group">
                        <div class="avatar-group">
                            <figure class="avatar" data-toggle="tooltip" data-original-title="Tobit Spraging">
                                <span class="avatar-title bg-success rounded-circle">T</span>
                            </figure>
                            <!-- <figure class="avatar" data-toggle="tooltip"  data-original-title="Cloe Jeayes">
                                <img src="/admin/chat/women_avatar4.jpg" class="rounded-circle" alt="image">
                            </figure> -->
                            <a href="#" title="Add friends">
                                <figure class="avatar">
                                    <span class="avatar-title bg-primary rounded-circle">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                             viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                             stroke-linecap="round" stroke-linejoin="round"
                                             class="feather feather-plus">
                                            <line x1="12" y1="5" x2="12" y2="19"></line>
                                            <line x1="5" y1="12" x2="19" y2="12"></line>
                                        </svg>
                                    </span>
                                </figure>
                            </a>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary">创建分组</button>
            </div>
        </div>
    </div>
</div>
<!--  创建分组 -->

<!-- layout -->
<div class="layout">

    <!-- 左侧导航栏 -->
    <nav class="navigation">
        <div class="nav-group">
            <ul>
                <li class="logo">
                    <a href="#">
                        <svg xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="612px" height="612px"
                             viewBox="0 0 612 612" xml:space="preserve">
                            <g>
                                <g>
                                    <g>
                                    <path d="M401.625,325.125h-191.25c-10.557,0-19.125,8.568-19.125,19.125s8.568,19.125,19.125,19.125h191.25
                                    c10.557,0,19.125-8.568,19.125-19.125S412.182,325.125,401.625,325.125z M439.875,210.375h-267.75
                                    c-10.557,0-19.125,8.568-19.125,19.125s8.568,19.125,19.125,19.125h267.75c10.557,0,19.125-8.568,19.125-19.125
                                    S450.432,210.375,439.875,210.375z M306,0C137.012,0,0,119.875,0,267.75c0,84.514,44.848,159.751,114.75,208.826V612
                                    l134.047-81.339c18.552,3.061,37.638,4.839,57.203,4.839c169.008,0,306-119.875,306-267.75C612,119.875,475.008,0,306,0z
                                    M306,497.25c-22.338,0-43.911-2.601-64.643-7.019l-90.041,54.123l1.205-88.701C83.5,414.133,38.25,345.513,38.25,267.75
                                    c0-126.741,119.875-229.5,267.75-229.5c147.875,0,267.75,102.759,267.75,229.5S453.875,497.25,306,497.25z"></path>
                                    </g>
                                </g>
                            </g>
                        </svg>
                    </a>
                </li>
                <li>
                    <a class="" data-navigation-target="chats" href="#" data-toggle="tooltip" data-placement="right"
                       data-original-title="消息">
                        <span class="badge badge-warning"></span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                             class="feather feather-message-circle">
                            <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
                        </svg>
                    </a>
                </li>
                <li>
                    <a data-navigation-target="friends" href="#" data-toggle="tooltip" data-placement="right"
                       class="active"
                       data-original-title="联系人">
                        <span class="badge badge-danger"></span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                             class="feather feather-user">
                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                            <circle cx="12" cy="7" r="4"></circle>
                        </svg>
                    </a>
                </li>
                <li>
                    <a data-navigation-target="favorites" data-toggle="tooltip" data-placement="right" href="#"
                       data-original-title="收藏夹">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                             class="feather feather-star">
                            <polygon
                                    points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                        </svg>
                    </a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- navigation -->

    <!-- 侧边栏 -->
    <div class="content">
        <!-- sidebar group -->
        <div class="sidebar-group mobile-open">
            <!-- 消息列表 -->
            <div id="chats" class="sidebar">
                <header>
                    <span>消息</span>
                    <ul class="list-inline">
                        <li class="list-inline-item" data-toggle="tooltip" data-original-title="添加分组">
                            <a class="btn btn-outline-light" href="#" data-toggle="modal" data-target="#newGroup">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-users">
                                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                    <circle cx="9" cy="7" r="4"></circle>
                                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                                </svg>
                            </a>
                        </li>
                        <li class="list-inline-item">
                            <a class="btn btn-outline-light active" data-toggle="tooltip"
                               href="#"
                               data-navigation-target="friends" data-original-title="New chat">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-plus-circle">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <line x1="12" y1="8" x2="12" y2="16"></line>
                                    <line x1="8" y1="12" x2="16" y2="12"></line>
                                </svg>
                            </a>
                        </li>
                        <li class="list-inline-item d-xl-none d-inline">
                            <a href="#" class="btn btn-outline-light text-danger sidebar-close">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-x">
                                    <line x1="18" y1="6" x2="6" y2="18"></line>
                                    <line x1="6" y1="6" x2="18" y2="18"></line>
                                </svg>
                            </a>
                        </li>
                    </ul>
                </header>
                <form>
                    <input type="text" class="form-control" placeholder="查找">
                </form>
                <div class="sidebar-body" style="overflow: hidden; outline: none;" tabindex="2">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <figure class="avatar avatar-state-success">
                                <img src="/admin/chat/man_avatar1.jpg" class="rounded-circle" alt="image">
                            </figure>
                            <div class="users-list-body">
                                <div>
                                    <h5 class="text-primary">联系人名称</h5>
                                    <p>聊天信息</p>
                                </div>
                                <div class="users-list-action">
                                    <div class="new-message-count">50</div>
                                    <small class="text-primary">03:41 PM</small>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <figure class="avatar avatar-state-warning">
                                <img src="/admin/chat/man_avatar4.jpg" class="rounded-circle" alt="image">
                            </figure>
                            <div class="users-list-body">
                                <div>
                                    <h5 class="text-primary">Forest Kroch</h5>
                                    <p>
                                        <i class="fa fa-camera mr-1"></i> Photo
                                    </p>
                                </div>
                                <div class="users-list-action">
                                    <div class="new-message-count">1</div>
                                    <small class="text-primary">Yesterday</small>
                                </div>
                            </div>
                        </li>

                        <li class="list-group-item">
                            <div>
                                <figure class="avatar">
                                    <img src="/admin/chat/man_avatar2.jpg" class="rounded-circle" alt="image">
                                </figure>
                            </div>
                            <div class="users-list-body">
                                <div>
                                    <h5>联系人</h5>
                                    <p>聊天信息</p>
                                </div>
                                <div class="users-list-action">
                                    <small class="text-muted">时间</small>
                                    <div class="action-toggle">
                                        <div class="dropdown">
                                            <a data-toggle="dropdown" href="#">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                     viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                     class="feather feather-more-horizontal">
                                                    <circle cx="12" cy="12" r="1"></circle>
                                                    <circle cx="19" cy="12" r="1"></circle>
                                                    <circle cx="5" cy="12" r="1"></circle>
                                                </svg>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-right">
                                                <a href="#" class="dropdown-item">打开</a>
                                                <a href="#" data-navigation-target="contact-information"
                                                   class="dropdown-item">详情</a>
                                                <a href="#" class="dropdown-item">添加至群聊</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="#" class="dropdown-item text-danger">删除好友</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!--  Chats sidebar -->

            <!-- 联系人列表 -->
            <div id="friends" class="sidebar active">
                <header>
                    <span>联系人</span>
                    <ul class="list-inline">
                        <li class="list-inline-item" data-toggle="tooltip" data-original-title="添加联系人">
                            <a class="btn btn-outline-light"
                               href="#" data-toggle="modal" data-target="#addFriends">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-user-plus">
                                    <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                    <circle cx="8.5" cy="7" r="4"></circle>
                                    <line x1="20" y1="8" x2="20" y2="14"></line>
                                    <line x1="23" y1="11" x2="17" y2="11"></line>
                                </svg>
                            </a>
                        </li>
                        <li class="list-inline-item d-xl-none d-inline">
                            <a href="#" class="btn btn-outline-light text-danger sidebar-close">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-x">
                                    <line x1="18" y1="6" x2="6" y2="18"></line>
                                    <line x1="6" y1="6" x2="18" y2="18"></line>
                                </svg>
                            </a>
                        </li>
                    </ul>
                </header>
                <form>
                    <input type="text" class="form-control" placeholder="查找联系人">
                </form>
                <div class="sidebar-body" style="overflow: hidden; outline: none;" tabindex="3">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item" data-navigation-target="chats">
                            <div>
                                <figure class="avatar avatar-state-success">
                                    <img src="/admin/chat/women_avatar5.jpg" class="rounded-circle" alt="image">
                                </figure>
                            </div>
                            <div class="users-list-body">
                                <div>
                                    <h5>联系人名称</h5>
                                    <p>签名</p>
                                </div>
                                <div class="users-list-action">
                                    <div class="action-toggle">
                                        <div class="dropdown">
                                            <a data-toggle="dropdown" href="#">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                     viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                     class="feather feather-more-horizontal">
                                                    <circle cx="12" cy="12" r="1"></circle>
                                                    <circle cx="19" cy="12" r="1"></circle>
                                                    <circle cx="5" cy="12" r="1"></circle>
                                                </svg>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-right">
                                                <a href="#" class="dropdown-item">聊天记录</a>
                                                <a href="#" data-navigation-target="contact-information"
                                                   class="dropdown-item">文件</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="#" class="dropdown-item text-danger">拉黑</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item" data-navigation-target="chats">
                            <div>
                                <!-- <figure class="avatar"> 离线 -->
                                <!-- <figure class="avatar avatar-state-success"> 在线 -->
                                <figure class="avatar avatar-state-warning">  <!-- 忙碌 -->
                                    <span class="avatar-title bg-success rounded-circle">A</span>
                                </figure>
                            </div>
                            <div class="users-list-body">
                                <div>
                                    <h5>Aline McShee</h5>
                                    <p>Marketing Assistant</p>
                                </div>
                                <div class="users-list-action">
                                    <div class="action-toggle">
                                        <div class="dropdown">
                                            <a data-toggle="dropdown"
                                               href="#">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                     viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                     class="feather feather-more-horizontal">
                                                    <circle cx="12" cy="12" r="1"></circle>
                                                    <circle cx="19" cy="12" r="1"></circle>
                                                    <circle cx="5" cy="12" r="1"></circle>
                                                </svg>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-right">
                                                <a href="#"
                                                   class="dropdown-item">New chat</a>
                                                <a href="#"
                                                   data-navigation-target="contact-information" class="dropdown-item">Profile</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="#"
                                                   class="dropdown-item text-danger">Block</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>

                    </ul>
                </div>
            </div>
            <!--  联系人列表 -->

            <!-- 收藏列表 -->
            <div id="favorites" class="sidebar">
                <header>
                    <span>收藏</span>
                    <ul class="list-inline">
                        <li class="list-inline-item d-xl-none d-inline">
                            <a href="#"
                               class="btn btn-outline-light text-danger sidebar-close">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-x">
                                    <line x1="18" y1="6" x2="6" y2="18"></line>
                                    <line x1="6" y1="6" x2="18" y2="18"></line>
                                </svg>
                            </a>
                        </li>
                    </ul>
                </header>
                <form>
                    <input type="text" class="form-control" placeholder="搜索">
                </form>
                <div class="sidebar-body" style="overflow: hidden; outline: none;" tabindex="4">
                    <ul class="list-group list-group-flush users-list">
                        <li class="list-group-item">
                            <div class="users-list-body">
                                <div>
                                    <h5>哈哈</h5>
                                    <p>注意：如果是客户端断</p>
                                </div>
                                <div class="users-list-action">
                                    <div class="action-toggle">
                                        <div class="dropdown">
                                            <a data-toggle="dropdown"
                                               href="#">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                     viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                     class="feather feather-more-horizontal">
                                                    <circle cx="12" cy="12" r="1"></circle>
                                                    <circle cx="19" cy="12" r="1"></circle>
                                                    <circle cx="5" cy="12" r="1"></circle>
                                                </svg>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-right">
                                                <a href="#" class="dropdown-item">打开</a>
                                                <a href="#" class="dropdown-item">删除收藏</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 收藏列表 -->
        </div>
        <!-- 侧边栏 -->

        <!-- 聊天 -->
        <div class="chat">
            <div class="chat-header">
                <div class="chat-header-user">
                    <figure class="avatar">
                        <img src="/admin/chat/man_avatar3.jpg" class="rounded-circle" alt="image">
                    </figure>
                    <div>
                        <h5>许嵩</h5>
                        <small class="text-success"><i id="input-status"></i></small>
                    </div>
                </div>
                <div class="chat-header-action">
                    <ul class="list-inline">
                        <li class="list-inline-item d-xl-none d-inline">
                            <a href="#" class="btn btn-outline-light mobile-navigation-button">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-menu">
                                    <line x1="3" y1="12" x2="21" y2="12"></line>
                                    <line x1="3" y1="6" x2="21" y2="6"></line>
                                    <line x1="3" y1="18" x2="21" y2="18"></line>
                                </svg>
                            </a>
                        </li>
                        <li class="list-inline-item" data-toggle="tooltip" data-original-title="语音通话">
                            <a href="#" class="btn btn-outline-light text-success" data-toggle="modal"
                               data-target="#call">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-phone">
                                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
                                </svg>
                            </a>
                        </li>
                        <li class="list-inline-item" data-toggle="tooltip" data-original-title="视频通话">
                            <a href="#" class="btn btn-outline-light text-warning" data-toggle="modal"
                               data-target="#videoCall">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-video">
                                    <polygon points="23 7 16 12 23 17 23 7"></polygon>
                                    <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
                                </svg>
                            </a>
                        </li>
                        <li class="list-inline-item">
                            <a href="#"
                               class="btn btn-outline-light" data-toggle="dropdown">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-more-horizontal">
                                    <circle cx="12" cy="12" r="1"></circle>
                                    <circle cx="19" cy="12" r="1"></circle>
                                    <circle cx="5" cy="12" r="1"></circle>
                                </svg>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a href="#" data-navigation-target="contact-information" class="dropdown-item">个人信息</a>
                                <a href="#" class="dropdown-item">清空聊天记录</a>
                                <div class="dropdown-divider"></div>
                                <a href="#" class="dropdown-item text-danger">拉黑</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="chat-body" style="overflow: hidden; outline: none;" tabindex="1">
                <!-- .no-message -->
                <!--
                <div class="no-message-container">
                    <div class="row mb-5">
                        <div class="col-md-4 offset-4">
                            <img src="/dist/media/svg/undraw_empty_xct9.svg" class="img-fluid" alt="image">
                        </div>
                    </div>
                    <p class="lead">Select a chat to read messages</p>
                </div>
                -->
                <div class="messages" id="chatBody">
                    {/*                    <div class="message-item">*/}
{/*                        <div class="message-avatar">*/}
{/*                            <figure class="avatar">*/}
{/*                                <img src="/admin/chat/man_avatar3.jpg" class="rounded-circle" alt="image">*/}
{/*                            </figure>*/}
{/*                            <div>*/}
{/*                                <h5>许嵩</h5>*/}
{/*                                <div class="time">11:59 PM</div>*/}
{/*                            </div>*/}
{/*                        </div>*/}
{/*                        <div class="message-content message-file">*/}
{/*                            <div class="file-icon">*/}
{/*                                <i class="fa fa-file-pdf-o"></i>*/}
{/*                            </div>*/}
{/*                            <div>*/}
{/*                                <div>发送文件 <i class="text-muted small">(50KB)</i></div>*/}
{/*                                <ul class="list-inline">*/}
{/*                                    <li class="list-inline-item mb-0"><a href="#">Download</a>*/}
{/*                                    </li>*/}
{/*                                    <li class="list-inline-item mb-0"><a href="#">View</a>*/}
{/*                                    </li>*/}
{/*                                </ul>*/}
{/*                            </div>*/}
{/*                        </div>*/}
{/*                    </div>*/}

{/*                    <div class="message-item messages-divider sticky-top" data-label="昨天"></div>*/}

{/*                    <div class="message-item">*/}
{/*                        <div class="message-avatar">*/}
{/*                            <figure class="avatar">*/}
{/*                                <img src="/admin/chat/man_avatar3.jpg" class="rounded-circle" alt="image">*/}
{/*                            </figure>*/}
{/*                            <div>*/}
{/*                                <h5>许嵩</h5>*/}
{/*                                <div class="time">10:43 AM</div>*/}
{/*                            </div>*/}
{/*                        </div>*/}
{/*                        <figure>*/}
{/*                            <img src="/admin/chat/image1.jpg" class="w-25 img-fluid rounded" alt="image">*/}
{/*                        </figure>*/}
{/*                    </div>*/}

                    <div class="message-item messages-divider" data-label="最新消息"></div>

                    <div class="message-item">
                        <div class="message-avatar">
                            <figure class="avatar">
                                <img src="/admin/chat/man_avatar3.jpg" class="rounded-circle" alt="image">
                            </figure>
                            <div>
                                <h5>许嵩</h5>
                                <div class="time">11:05 AM</div>
                            </div>
                        </div>
                        <div class="message-content">
                            见到你很高兴，勇士
                        </div>
                    </div>

                    <div class="message-item outgoing-message">
                        <div class="message-avatar">
                            <figure class="avatar">
                                <img src="/admin/chat/women_avatar5.jpg" class="rounded-circle" alt="image">
                            </figure>
                            <div>
                                <h5>胡歌</h5>
                                <div class="time">01:20 PM</div>
                            </div>
                        </div>
                        <div class="message-content">
                            今天也是充满希望的一天
                        </div>
                    </div>

                </div>
            </div>
            <div class="chat-footer">
                <form>
                    <div>
                        <button class="btn btn-light mr-3" data-toggle="tooltip" type="button" data-original-title="表情">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                 stroke-linejoin="round" class="feather feather-smile">
                                <circle cx="12" cy="12" r="10"></circle>
                                <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
                                <line x1="9" y1="9" x2="9.01" y2="9"></line>
                                <line x1="15" y1="9" x2="15.01" y2="9"></line>
                            </svg>
                        </button>
                    </div>
                    <input type="text" id="content" class="form-control" placeholder="发送消息">
                    <div class="form-buttons">
                        <button class="btn btn-light" data-toggle="tooltip" type="button" data-original-title="添加文件">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                 stroke-linejoin="round" class="feather feather-paperclip">
                                <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
                            </svg>
                        </button>
                        <button class="btn btn-primary" type="button" id="sendMessage">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                 stroke-linejoin="round" class="feather feather-send">
                                <line x1="22" y1="2" x2="11" y2="13"></line>
                                <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                            </svg>
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <!-- chat -->
    </div>
    <!-- content -->
</div>
<!-- layout -->
<input id="user_id" value="{$userId}" type="hidden">

<!-- Bundle -->
<script src="/admin/chat/bundle.js"></script>
<script src="/admin/chat/enjoyhint.min.js"></script>
<!-- App scripts -->
<script src="/admin/chat/app.min.js"></script>
<!-- Examples -->
{/*<script src="/admin/chat/examples.js"></script>*/}

<script type="text/javascript" src="/chat/swfobject.js"></script>
<script type="text/javascript" src="/chat/web_socket.js"></script>
<script>
    WEB_SOCKET_SWF_LOCATION = "/swf/WebSocketMain.swf";
    WEB_SOCKET_DEBUG = true;
    let ws;
    ws = new WebSocket("ws://106.53.126.90:7272");
    ws.onopen = function () {
        // alert("连接成功");
    };
    ws.onmessage = onmessage;

    function onmessage(e) {
        let data = JSON.parse(e.data),
            userId = $('#user_id').val();
        switch (data['type']) {
            case 'ping':
                ws.send('{"type":"pong"}');
                break;
            //聊天
            case 'say':

                if (parseInt(userId) === data['user_id']) {
                    yourSpeak(data);
                } else {
                    othersSpeak(data);
                }
                //刷新聊天框
                let chat_body = $('.layout .content .chat .chat-body');
                setTimeout(function () {
                    chat_body.scrollTop(chat_body.get(0).scrollHeight, -1).niceScroll({
                        cursorcolor: 'rgba(66, 66, 66, 0.20)',
                        cursorwidth: "4px",
                        cursorborder: '0px'
                    }).resize();
                }, 200);
                break;
            case 'inputStatus':
                let text = '';
                if (parseInt(userId) !== data['user_id']) {
                    if (data['status'] === 'inputting') {
                        text = '正在输入...'
                    }
                    $('#input-status').html(text);
                }
                break;
        }
    }

    //发送消息
    $('#sendMessage').on('click', function () {
        let message = $('#content').val();
        console.log(message.length)
        if (message.length < 1) {
            alert('请输入要发送的消息');
            return false;
        } else {
            $.post('/manage/chat/sendMsg', {data: message}, function (res) {
                if (res.code === 0) {
                    $('#content').val('');
                } else {
                    alert('发送失败');
                }
            })
        }
    });

    //输入框获取焦点
    $("#content").focus(function () {
        $.post('/manage/chat/inputting', {}, function (res) {
        });
    });
    //输入框获失焦点
    $("#content").blur(function () {
        $.post('/manage/chat/cancelInput', {}, function (res) {
        });
    })

    function yourSpeak(data) {
        let html = '<div class="message-item outgoing-message">' +
            '<div class="message-avatar">' +
            '<figure class="avatar">' +
            '<img src="' + data['avatar'] + '" class="rounded-circle" alt="image">' +
            '</figure>' +
            '<div>' +
            '<h5>' + data['username'] + '</h5>' +
            '<div class="time">' + data['time'] + '</div>' +
            '</div>' +
            '</div>' +
            '<div class="message-content">' + data['content'] +
            '</div>' +
            '</div>';
        $('#chatBody').append(html);
    }

    function othersSpeak(data) {
        let html = '<div class="message-item">' +
            '<div class="message-avatar">' +
            '<figure class="avatar">' +
            '<img src="' + data['avatar'] + '" class="rounded-circle" alt="image">' +
            '</figure>' +
            '<div>' +
            '<h5>' + data['username'] + '</h5>' +
            '<div class="time">' + data['time'] + '</div>' +
            '</div>' +
            '</div>' +
            '<div class="message-content">' + data['content'] +
            '</div>' +
            '</div>';
        $('#chatBody').append(html);
    }
</script>

</body>
</html>